import React, { useEffect, useState, useMemo } from "react";
import "./szh.css";
import { SearchBar, Swiper } from "antd-mobile";
import { Grid } from "@nutui/nutui-react";
import { useNavigate } from "react-router-dom";
import { Tabs, Dropdown, InfiniteScroll } from "antd-mobile";
import axios from "axios";
import List from "../lmy/List";

export default function Home() {
  const navigate = useNavigate();
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [type, setType] = useState("all");
  const [page, setPage] = useState(1);
  const images = [
    "https://gw.alicdn.com/imgextra/O1CN01OasDh11Dy7SkAXAI5_!!2184360284-0-picasso.jpg_360x360q90.jpg",
    "https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/1071273746/O1CN01B83xdM1dXidoR2ls3_!!1071273746.jpg_360x360q90.jpg",
    "https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/1575380743/O1CN01WPdKGY1HMLGEcCACe_!!0-item_pic.jpg_360x360q90.jpg",
    "https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2216839697262/O1CN01TWQSXh23W3DDbV9LV_!!0-item_pic.jpg_360x360q90.jpg",
  ];
  const gong = [
    { img: "/1(1).png", text: "水果类" },
    { img: "/1(4).png", text: "家电类" },
    { img: "/1(3).png", text: "首饰类" },
    { img: "/1(2).png", text: "粮油类" },
    { img: "/1(5).png", text: "粮油类" },
  ];
  async function loadMore() {
    await sleep(2000);
    const append = await getData();
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
    setPage((val) => val + 1);
  }
  const getData = async () => {
    let list = await axios.get(`/Lmy/list?page=${page}`);
    return list.data.data;
  };
  const newData = useMemo(() => {
    if (type === "all") {
      return data;
    } else if (type === "sales") {
      let copyData = [...data];
      return copyData.sort((a, b) => b.sales - a.sales);
    } else {
      return data;
    }
  }, [data, type]);
  useEffect(() => {
    getData();
  }, []);
  return (
    <div className="home">
      <div
        className="search"
        style={{
          width: "100%",
          height: "50px",
          background: "white",
        }}
        onClick={() => {
          navigate("/search");
        }}
      >
        <SearchBar placeholder="请输入搜索内容" className="search" />
      </div>
      <Swiper loop autoplay className="swiper">
        {images.map((i, j) => (
          <Swiper.Item key={j} className="swiper-item">
            <img src={i} alt="" />
          </Swiper.Item>
        ))}
      </Swiper>
      <div className="gg">
        {gong.map((i) => (
          <div
            key={i.img}
            className="gg-i"
            onClick={() => {
              navigate("/fen");
            }}
          >
            <img className="gg-i-img" src={i.img} />
            <p>{i.text}</p>
          </div>
        ))}
      </div>
      <div className="tj"></div>
      <List></List>
    </div>
  );
}
